<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MapV强边界图</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="http://mapv.baidu.com/build/mapv.min.js"></script>
<script type="text/javascript" src="../../dist/iclient9-leaflet.min.js"></script>

<script type="text/javascript">
    var map = L.map('map', {
        center: [36.64, 108.15],
        zoom: 4,
    });

    var mbAttr = 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        token = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
        mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + token;

    L.tileLayer(mbUrl, {id: 'mapbox.dark', attribution: mbAttr}).addTo(map);
    loadData();

    //示例数据来源为百度MapV的加偏数据，iClient9未做纠偏处理
    function loadData() {
        var randomCount = 500;

        var node_data = {
            "0": {"x": 108.154518, "y": 36.643346},
            "1": {"x": 121.485124, "y": 31.235317},
        };

        var edge_data = [
            {"source": "1", "target": "0"}
        ];

        var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特",
            "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州",
            "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁",
            "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"
        ];

        //自定义数据
        for (var i = 1; i < randomCount; i++) {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            node_data[i] = {
                x: cityCenter.lng - 5 + Math.random() * 10,
                y: cityCenter.lat - 5 + Math.random() * 10,
            }
            edge_data.push(
                {"source": ~~(i * Math.random()), "target": '0'}
            );
        }

        var fbundling = mapv.utilForceEdgeBundling().nodes(node_data).edges(edge_data);

        var results = fbundling();

        var data = [];
        var timeData = [];

        for (var i = 0; i < results.length; i++) {
            var line = results[i];
            var coordinates = [];
            for (var j = 0; j < line.length; j++) {
                coordinates.push([line[j].x, line[j].y]);
                timeData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [line[j].x, line[j].y]
                    },
                    count: 1,
                    time: j
                });
            }
            data.push({
                geometry: {
                    type: 'LineString',
                    coordinates: coordinates
                }
            });
        }
        //创建MapV图层
        var dataSet1 = new mapv.DataSet(data);
        var options1 = {
            strokeStyle: 'rgba(55, 50, 250, 0.3)',
            globalCompositeOperation: 'lighter',
            shadowColor: 'rgba(55, 50, 250, 0.5)',
            shadowBlur: 10,
            methods: {
                click: function (item) {
                }
            },
            lineWidth: 1.0,
            draw: 'simple'
        };
        L.supermap.mapVLayer(dataSet1, options1).addTo(map);

        //创建MapV图层
        var dataSet2 = new mapv.DataSet(timeData);
        var options2 = {
            fillStyle: 'rgba(255, 250, 250, 0.9)',
            globalCompositeOperation: 'lighter',
            size: 1.5,
            animation: {
                type: 'time',
                stepsRange: {
                    start: 0,
                    end: 100
                },
                trails: 1,
                duration: 5,
            },
            draw: 'simple'
        };

        L.supermap.mapVLayer(dataSet2, options2).addTo(map);
        setTimeout(function () {
             map.openPopup("示例数据来源为百度MapV的加偏数据，iClient9未做纠偏处理", map.getCenter());
        }, 1000)
    }


</script>

</body>
</html>
